<template>
  <div  class="sliderFather">
    <el-slider v-model="currentValue" :min="minValue" :max="maxValue" @change="changeCurrentValue"
     :disabled="indexName=='收卷产量'||indexName=='A品产量'" :step="0.01"></el-slider>
    <div class="rightButton"></div>
    <div :style="{width:'3px',height:'14px',background:'#E79315',position:'absolute',top:'13px',transform:'translateX(-50%)',left:interval+'%'}"></div>
  </div>
</template>

<script>
export default {
  name: "Slider",
  props: {
    currentValue: {
      type: Number,
      default: 30
    },
    targetValue: {
      type: Number,
      default: 30
    },
    maxValue:{
      type: Number,
      default: 100
    },
    minValue:{
      type: Number,
      default: 0
    },
    indexName:{
      type: String,
      default: '数据名'
    },
    // currentIndex:{
    //   type: Number,
    //   default: 0
    // }
  },
  computed: {
    // 计算属性：反转后的消息
    interval() {
      // 计算逻辑：返回原始消息的反转字符串
      let a=this.$props.maxValue-this.$props.minValue     //最大最小范围多少
      let b=this.$props.targetValue-this.$props.minValue  //目标值距离最小值多少
      let c=(b/a)*100   //目标值距离最小值占比
      return c
      // return this.message.split('').reverse().join('');
    }
  },
  // watch: {
  //   currentValue(newValue) {
  //     // 监听属性变化时的处理逻辑
  //     // 在这里可以执行任何需要的操作，例如更新其他属性或触发其他方法
  //     // 例如，更新另一个属性：
  //     // this.anotherProperty = newValue;
  //     // 或者触发其他方法：
  //     // this.someMethod(newValue);
  //     // console.log(newValue)
  // },
  methods: {
      changeCurrentValue(val){
        console.log(val,'555555')
        this.$emit('change',val)
      }
  }
}
</script>

<style scoped lang="scss">
.sliderFather{
  width: 77%;
  position: relative;
}
.divider{
  width: 3px;
  height: 14px;
  background: #E79315;
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
}
.rightButton{
  position: absolute;
  top: 13px;
  right: -10px;
  width: 0;
  height: 0;
  border-top: none;
  border-bottom: 6px solid transparent;  /* 左边框透明，宽度为所需的一半（因为总宽度会被两个透明边框平分） */
  border-top: 6px solid transparent; /* 右边框透明，宽度同样为所需的一半 */
  border-left: 10px solid rgba(94,127,174,0.29);        /* 上边框设置三角形的高度（与原始元素的height相同或根据需要调整）和颜色 */
  /* background-color 和 border-radius 不再需要，因为三角形是通过边框创建的 */
  transition: .2s; /* 保留过渡效果，如果适用 */
  -webkit-user-select: none; /* 保留用户选择禁用，如果适用 */
  -moz-user-select: none;    /* 保留用户选择禁用，如果适用 */
  user-select: none;         /* 保留用户选择禁用，如果适用 */
  border-radius: 0;
  background-color: inherit;
}
::v-deep .el-slider__button{
  width: 0;
  height: 0;
  border-top: none;
  border-left: 6px solid transparent;  /* 左边框透明，宽度为所需的一半（因为总宽度会被两个透明边框平分） */
  border-right: 6px solid transparent; /* 右边框透明，宽度同样为所需的一半 */
  border-bottom: 10px solid #2AC6AB;        /* 上边框设置三角形的高度（与原始元素的height相同或根据需要调整）和颜色 */
  /* background-color 和 border-radius 不再需要，因为三角形是通过边框创建的 */
  transition: .2s; /* 保留过渡效果，如果适用 */
  -webkit-user-select: none; /* 保留用户选择禁用，如果适用 */
  -moz-user-select: none;    /* 保留用户选择禁用，如果适用 */
  user-select: none;         /* 保留用户选择禁用，如果适用 */
  border-radius: 0;
  background-color: inherit;
  //display: none !important;
}

::v-deep .el-slider__runway.disabled{
  .el-slider__button{
    width: 0;
    height: 0;
    border-top: none;
    border-left: 6px solid transparent;  /* 左边框透明，宽度为所需的一半（因为总宽度会被两个透明边框平分） */
    border-right: 6px solid transparent; /* 右边框透明，宽度同样为所需的一半 */
    border-bottom: 10px solid #2AC6AB;        /* 上边框设置三角形的高度（与原始元素的height相同或根据需要调整）和颜色 */
    /* background-color 和 border-radius 不再需要，因为三角形是通过边框创建的 */
    transition: .2s; /* 保留过渡效果，如果适用 */
    -webkit-user-select: none; /* 保留用户选择禁用，如果适用 */
    -moz-user-select: none;    /* 保留用户选择禁用，如果适用 */
    user-select: none;         /* 保留用户选择禁用，如果适用 */
    border-radius: 0;
    background-color: inherit;
    //display: none !important;
  }
}

::v-deep .el-slider__button.hover{
  display: inline-block !important;
}
::v-deep .el-slider__bar{
  background: linear-gradient( 270deg, #056151 0%, rgba(5,97,81,0.23) 100%);
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  opacity: 0.47;
}
::v-deep .el-slider__runway{
  background: rgba(94,127,174,0.29);
  border-radius: 0;
}
</style>
